<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Related Post Widget Configurator</title>
<link rel="shortcut icon" href="http://mini-web-tools.googlecode.com/svn/p/img/favicon.ico">
<style>

* {
  margin:0;
  padding:0;
}
html {overflow-y:scroll}
body {
  background-color:white;
  padding:80px;
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:black;
  width:750px;
  margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
  font:inherit;
  font-weight:bold;
  margin:0 0 10px;
}
h2 {font-size:20px}
h4 {font-size:15px}
a {
  color:blue;
  text-decoration:none;
}
a:hover {text-decoration:underline}
p {margin:0 0 10px}
form {
  border:1px solid black;
  margin:0 0 30px;
  padding:10px;
}
input,
select,
textarea {
  display:block;
  width:100%;
  border:1px solid black;
  background-color:white;
  padding:2px;
  font:inherit;
  color:inherit;
  vertical-align:top;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
input[type="checkbox"],
input[type="radio"] {
  display:inline;
  width:auto;
  border:none;
  background:none;
  padding:0;
  position:relative;
  top:2px;
  cursor:pointer;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  cursor:pointer;
  background-color:black;
  color:white;
  font-weight:bold;
  width:auto;
  padding-left:6px;
  padding-right:6px;
  border-color:transparent;
}
label,
select {cursor:pointer}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {background-color:darkblue}
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:hover {background-color:blue}
input[type="text"]:focus,
textarea:focus {background-color:#ffa}
input.no-appearance {
  display:inline;
  background:none;
  border:none;
  width:auto;
  font-weight:bold;
  margin:0;
  padding:0;
  vertical-align:baseline;
}
#sbt {
  margin:20px 0 0;
  padding:10px 15px;
  float:right;
}
table,
tr,
th,
td {
  border:none;
  border-spacing:0;
  border-collapse:collapse;
  width:100%;
}
th,
td {
  text-align:left;
  vertical-align:top;
  padding:5px 5px 0;
  width:auto;
}
th {
  text-align:right;
  padding-right:10px;
  width:200px;
}
th.configurator-header {
  text-align:left;
  color:#aaa;
  font-style:italic;
  padding:0;
}
tr.separator td {
  height:10px;
  padding:0;
}
.related-post {
  padding:15px;
  border:1px dashed black;
}
.related-post-style-1,
.related-post-style-6 {
  font-size:13px;
  margin-left:2em;
}
#result-container h4 {margin:20px 0 0}
#result-container .related-post h4 {margin:0 0 .5em}
pre {
  margin:0 0 20px;
  border:1px dashed black;
  background-color:#ffd;
  padding:10px;
  overflow:auto;
  white-space:pre;
  word-wrap:normal;
  font:normal normal 11px/normal "Courier New",Courier,"Nimbus Mono L",Monospace;
  color:inherit;
}
code {
  font-family:"Courier New",Courier,"Nimbus Mono L",Monospace;
  color:inherit;
}
pre code {font:inherit}
.description {
  display:none;
  font-size:11px;
}
input:focus + .description,
select:focus + .description,
textarea:focus + .description {display:block}

</style>
</head>
<body>

<div class="config-group">
	<h2>Widget Configurator &middot; <a href="http://www.dte.web.id/2013/07/widget-artikel-terkait-blogger-6-dalam-1.html">Back to the Article</a></h2>
	<form action="#" name="config">
		<input type="text" name="f1" value="http://dte-feed.blogspot.com/" style="display:none;">
		<table border="0">
			<tbody>
				<tr><th colspan="2" class="configurator-header">General Configuration</th></tr>
				<!-- tr><th>Blog URL:</th><td><input type="text" name="f1" value="http://"></td></tr -->
				<tr><th>Related Post Style:</th><td>
					<select name="f10">
						<option value="1" selected>Style 1 = Post Title List</option>
						<option value="2">Style 2 = Post Thumbnail with Summary</option>
						<option value="3">Style 3 = Post Thumbnail with Post Title</option>
						<option value="4">Style 4 = Post Thumbnail with Tooltip Hover</option>
						<option value="5">Style 5 = Post Thumbnail with Title Overlay Hover</option>
						<option value="6">Style 6 = Post Title List with Tooltip Hover</option>
					</select>
				</td></tr>
				<tr><th>Widget Title:</th><td><input type="text" name="f2" value="Related Post:"><em class="description">Define your related post widget title.</em></td></tr>
				<tr><th>Number of Posts to Display:</th><td><input type="text" name="f3" value="5"><em class="description">How many post(s) you want to display in this widget.</em></td></tr>
				<tr><th>Summary Length:</th><td><input type="text" name="f4" value="370"><em class="description">Length of the post summary (for <b>Post Thumbnail with Summary</b> style only).</em></td></tr>
				<tr><th>Post Title Length:</th><td><input type="text" name="f5" value="auto"><em class="description">Change the value into number to crop the post title characters that's too long.</em></td></tr>
				<tr><th>Thumbnail Size:</th><td><input type="text" name="f6" value="80"><em class="description">Width of the post thumbnail (for related post style with thumbnails).</em></td></tr>
				<tr><th>Container ID:</th><td><input type="text" name="f7" value="related-post"><em class="description">ID of the related post container that's used to display the result.</em></td></tr>
				<tr><th>Links:</th><td><label><input type="checkbox" name="f8"> Open links in new window?</label></td></tr>
				<tr><th>Read More Text:</th><td><input type="text" name="f9" value="Read More"><em class="description">The read more link text (for <b>Post Thumbnail with Summary</b> style only).</em></td></tr>
				<tr><th>Image Placeholder:</th><td><input type="text" name="f11" value="image.jpg"><em class="description">Image placeholder for posts without image.</em></td></tr>
				<tr class="separator"><td colspan="2">&nbsp;</td></tr>
				<tr><th colspan="2" class="configurator-header">Style Configuration</th></tr>
				<tr>
					<td colspan="2">
						<div class="widget-styler">
							<em class="description" style="display:block;margin-bottom:5px;"><strong>inherited:</strong> Color inherited with your <b>Blogger</b> template style.</em>
							<p>Link Color: <input type="text" name="f12" value="inherited" onfocus="if(this.value=='inherited'){this.value='#00f'}setBg(this);" onblur="if(this.value==''){this.value='inherited'}" onkeyup="setBg(this);"></p>
							<p>Hover Link Color: <input type="text" name="f13" value="inherited" onfocus="if(this.value=='inherited'){this.value='#f00'}setBg(this);" onblur="if(this.value==''){this.value='inherited'}" onkeyup="setBg(this);"></p>
							<p>Image Border: <input type="text" name="f14" value="0px" onblur="if(this.value==''){this.value='0px'}"></p>
							<p>Image Padding: <input type="text" name="f15" value="0px" onblur="if(this.value==''){this.value='0px'}"></p>
							<p>Image Background Color: <input type="text" name="f16" value="transparent" onfocus="if(this.value=='transparent'){this.value='#fafafa'}setBg(this);" onblur="if(this.value==''){this.value='transparent'}" onkeyup="setBg(this);"></p>
							<p>Border Color: <input type="text" name="f17" value="#bbb" onfocus="if(this.value=='transparent'){this.value='#eee'}setBg(this);" onblur="if(this.value==''){this.value='transparent'}" onkeyup="setBg(this);"></p>
							<p>Separator Color: <input type="text" name="f18" value="#eee" onfocus="setBg(this);" onblur="if(this.value==''){this.value='#eee'}" onkeyup="setBg(this);"></p>
							<p>Tooltip Position: <label><input type="radio" name="ttpo" checked> Top</label> <label><input type="radio" name="ttpo"> Bottom</label> <em class="description" style="display:inline;">(For <b>Post Thumbnail with Tooltip Hover</b> and <b>Post Title List with Tooltip Hover</b> style only).</em></p>
							<p><label><input type="checkbox" name="ro"> Rounded Corner Image and Tooltip?</label> <em class="description" style="display:inline;">(For related post style with thumbnails).</em></p>
							<p><label style="color:red;"><input type="checkbox" name="cmp"> Compact Source Code?</label></p>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<input type="button" class="submit-button" name="sbt" id="sbt" value="Preview & Get Code!">
		<div id="result-container" style="display:block;clear:both;"></div>
	</form>
</div>
<div id="result-code"></div>

<script>
var labelArray = [], relatedPostConfig = {};
</script>
<!-- script type="text/javascript" src="related-post.js"></script -->
<script>
var head = document.getElementsByTagName('head')[0],
	result = document.getElementById('result-container'),
	form = document.forms.config,
	submit = document.getElementById('sbt'),
	code = document.getElementById('result-code'),
	style = "";

// http://www.dte.web.id/2013/01/javascript-seleksi-teks-otomatis.html
function autoSelect(a) {
	var b, range;
	if (window.getSelection) {
		b = window.getSelection();
		range = document.createRange();
		range.selectNodeContents(a);
		b.removeAllRanges();
		b.addRange(range);
	} else if (document.selection) {
		b = document.selection.createRange().text;
		range = document.body.createTextRange();
		range.moveToElementText(a);
		range.select();
	}
}
function setBg(elem) {
	elem.parentNode.style.backgroundColor = elem.value == "inherited" ? 'white' : elem.value;
}
function changeStyle(m) {
	var thumbnailSize = form.f6.value != "false" ? parseInt(form.f6.value, 10) : 72,
		borderColor = form.f17.value !== "" ? form.f17.value : 'transparent',
		separatorColor = form.f18.value !== "" ? form.f18.value : 'transparent',
		imageBorder = (form.f14.value != "0px" && form.f14.value !== "") ? 'border:' + form.f14.value + ' solid ' + borderColor + ';\n' : 'border:none;\n',
		imagePadding = (form.f15.value != "0px" && form.f15.value !== "") ? 'padding:' + form.f15.value + ';\n' : 'padding:0;\n',
		imageBgColor = form.f16.value != "" ? 'background-color:' + form.f16.value + ';\n' : 'background:none;\n',
		itemWidth = parseInt(form.f6.value, 10) + ((parseInt(form.f14.value, 10) + parseInt(form.f15.value, 10)) * 2),
		ttPos = form.ttpo[1].checked ?  "top" : "bottom",
		arrPos = form.ttpo[0].checked ?  "top" : "bottom",
		round = form.ro.checked ? '  -webkit-border-radius:' + Math.round(parseInt(form.f15.value, 10) - parseInt(form.f14.value, 10)) + 'px;\n  -moz-border-radius:' + Math.round(parseInt(form.f15.value, 10) - parseInt(form.f14.value, 10)) + 'px;\n  border-radius:' + Math.round(parseInt(form.f15.value, 10) - parseInt(form.f14.value, 10)) + 'px;\n' : "",
		ttRound = form.ro.checked ? '\n  -webkit-border-radius:8px;\n  -moz-border-radius:8px;\n  border-radius:8px;\n' : "\n";
	style = '/* ==== Related Post Widget Start ==== */\n\n.related-post {\n  margin:2em auto 0;\n  font:normal normal 11px/1.4 Arial,Sans-Serif;\n}\n.related-post h4 {\n  font-size:150%;\n  margin:0 0 .5em;\n}\n';
	style += (form.f12.value != "inherited" && form.f12.value !== "") ? '.related-post a {color:' + form.f12.value + '}\n' : "";
	style += (form.f13.value != "inherited" && form.f13.value !== "") ? '.related-post a:hover {color:' + form.f13.value + '}\n' : "";
	if (m == 2) {
		style += '\n/* Style 2 */\n.related-post-style-2,\n.related-post-style-2 li {\n  margin:0;\n  padding:0;\n  list-style:none;\n}\n.related-post-style-2 li {\n  padding:10px;\n  border-top:1px solid ' + separatorColor + ';\n  overflow:hidden;\n}\n.related-post-style-2 li:first-child {border-top:none}\n.related-post-style-2 .related-post-item-thumbnail {\n  width:' + thumbnailSize + 'px;\n  height:' + thumbnailSize + 'px;\n  max-width:none;\n  max-height:none;\n  ' + imageBgColor + '  ' + imageBorder + '  ' + imagePadding + round + '  float:left;\n  margin:2px 10px 0 0;\n}\n.related-post-style-2 .related-post-item-title {\n  font-weight:bold;\n  font-size:110%;\n}\n.related-post-style-2 .related-post-item-summary {\n  display:block;\n  overflow:hidden;\n}\n.related-post-style-2 .related-post-item-more {}\n';
	} else if (m == 3) {
		style += '\n/* Style 3 */\n.related-post-style-3,\n.related-post-style-3 li {\n  margin:0;\n  padding:0;\n  list-style:none;\n  word-wrap:break-word;\n  overflow:hidden;\n}\n.related-post-style-3 .related-post-item {\n  display:block;\n  float:left;\n  width:' + itemWidth + 'px;\n  height:auto;\n  padding:10px;\n  border-left:1px solid ' + separatorColor + ';\n  margin-bottom:-989px;\n  padding-bottom:999px;\n}\n.related-post-style-3 .related-post-item:first-child {border-left:none}\n.related-post-style-3 .related-post-item-thumbnail {\n  display:block;\n  margin:0 0 10px;\n  width:' + thumbnailSize + 'px;\n  height:' + thumbnailSize + 'px;\n  max-width:none;\n  max-height:none;\n  ' + imageBgColor + '  ' + imageBorder + '  ' + imagePadding + round + '}\n.related-post-style-3 .related-post-item-title {font-weight:bold}\n';
	} else if (m == 4) {
		style += '\n/* Style 4 */\n.related-post-style-4,\n.related-post-style-4 li {\n  margin:0;\n  padding:0;\n  list-style:none;\n  word-wrap:break-word;\n  overflow:visible;\n  position:relative;\n  outline:none;\n}\n.related-post-style-4 .related-post-item {\n  display:block;\n  float:left;\n  width:' + itemWidth + 'px;\n  height:auto;\n  padding:10px;\n}\n.related-post-style-4 .related-post-item-thumbnail {\n  display:block;\n  margin:0 0 10px;\n  width:' + thumbnailSize + 'px;\n  height:' + thumbnailSize + 'px;\n  max-width:none;\n  max-height:none;\n  ' + imageBgColor + '  ' + imageBorder + '  ' + imagePadding + round + '}\n.related-post-style-4 .related-post-item-title {font-weight:bold}\n.related-post-style-4 .related-post-item-tooltip {\n  border:1px solid ' + borderColor + ';\n  background-color:white;\n  width:150%;\n  text-align:center;\n  position:absolute;\n  ' + ttPos + ':100%;\n  left:0;\n  z-index:999;\n  margin-' + ttPos + ':-30px;\n  padding:10px 10px 12px;\n  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);\n  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);\n  box-shadow:0 1px 3px rgba(0,0,0,.2);' + ttRound + '  display:none;\n}\n.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip {\n  left:auto;\n  right:0;\n}\n.related-post-style-4 .related-post-item-tooltip:before,\n.related-post-style-4 .related-post-item-tooltip:after {\n  content:"";\n  display:block;\n  width:0;\n  height:0;\n  border:10px solid transparent;\n  border-' + arrPos + '-color:inherit;\n  position:absolute;\n  ' + arrPos + ':100%;\n  left:' + (Math.round(itemWidth/2)-3) + 'px;\n}\n.related-post-style-4 .related-post-item-tooltip:after {\n  border-' + arrPos + '-color:white;\n  border-width:9px;\n  margin-left:1px;\n}\n.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:before,\n.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {\n  right:' + (Math.round(itemWidth/2)-3) + 'px;\n  left:auto;\n}\n.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {\n  margin-left:auto;\n  margin-right:1px;\n}\n.related-post-style-4 .related-post-item:focus {outline:none}\n.related-post-style-4 .related-post-item:focus .related-post-item-tooltip,\n.related-post-style-4 .related-post-item:hover .related-post-item-tooltip {display:block}\n';
	} else if (m == 5) {
		style += '\n/* Style 5 */\n.related-post-style-5,\n.related-post-style-5 li {\n  margin:0;\n  padding:0;\n  list-style:none;\n  word-wrap:break-word;\n  overflow:hidden;\n}\n.related-post-style-5 .related-post-item {\n  display:block;\n  float:left;\n  width:' + itemWidth + 'px;\n  height:auto;\n  padding:10px;\n  border-left:1px solid ' + separatorColor + ';\n}\n.related-post-style-5 .related-post-item:first-child {border-left:none}\n.related-post-style-5 .related-post-item-wrapper {\n  display:block;\n  position:relative;\n  overflow:hidden;\n}\n.related-post-style-5 .related-post-item-thumbnail {\n  display:block;\n  margin:0;\n  width:' + thumbnailSize + 'px;\n  height:' + thumbnailSize + 'px;\n  max-width:none;\n  max-height:none;\n  ' + imageBgColor + '  ' + imageBorder + '  ' + imagePadding + round + '}\n.related-post-style-5 .related-post-item-tooltip {\n  display:block;\n  background-color:black;\n  background-color:rgba(0,0,0,.9);\n  position:absolute;\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  padding:10px;\n  line-height:normal;\n  font-style:italic;\n  color:white;\n  overflow:hidden;\n' + round + '  display:none;\n}\n.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,\n.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}\n';
	} else if (m == 6) { 
		style += '\n/* Style 6 */\n.related-post-style-6 li {position:relative}\n.related-post-style-6 .related-post-item-thumbnail {\n  width:' + thumbnailSize + 'px;\n  height:' + thumbnailSize + 'px;\n  max-width:none;\n  max-height:none;\n  ' + imageBgColor + '  ' + imageBorder + '  ' + imagePadding + round + '  float:left;\n  margin:0 10px 0 0;\n}\n.related-post-style-6 .related-post-item-title {\n  display:block;\n  font-weight:bold;\n}\n.related-post-style-6 .related-post-item-summary {\n  display:block;\n  overflow:hidden;\n  font-size:11px;\n}\n.related-post-style-6 .related-post-item-tooltip {\n  position:absolute;\n  ' + ttPos + ':100%;\n  left:-10px;\n  z-index:999;\n  margin-' + ttPos + ':10px;\n  border:1px solid ' + borderColor + ';\n  background-color:white;\n  padding:10px;\n  width:90%;\n  height:auto;\n  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);\n  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);\n  box-shadow:0 1px 3px rgba(0,0,0,.2);' + ttRound + '  display:none;\n}\n.related-post-style-6 .related-post-item-tooltip:before,\n.related-post-style-6 .related-post-item-tooltip:after {\n  content:"";\n  display:block;\n  width:0;\n  height:0;\n  border:10px solid transparent;\n  border-' + arrPos + '-color:inherit;\n  position:absolute;\n  ' + arrPos + ':100%;\n  left:' + (Math.round(itemWidth/2)-5) + 'px;\n}\n.related-post-style-6 .related-post-item-tooltip:after {\n  border-' + arrPos + '-color:white;\n  border-width:9px;\n  margin-left:1px;\n}\n.related-post-style-6 li:hover .related-post-item-tooltip {display:block}\n';
	}
	style += '\n/* ==== Related Post Widget End ==== */';
	if (form.cmp.checked) {
		style = style.replace(/\n  /g, "").replace(/\n/g, "").replace(/\}/g, "}\n").replace(/\;\}/g, "}").replace(/\/\*([\s\S]+?)\*\//g, "");
	}
}
function submitConfig() {
	code.innerHTML = "";
	result.innerHTML = "";
	changeStyle(parseInt(form.f10.value, 10));
	result.innerHTML = '<h4>Widget Preview:</h4><style type="text/css">' + style + '</style><div id="' + form.f7.value + '" class="related-post"><em style="color:green;">Loading preview...</em></div>';
	relatedPostConfig = {
		homePage: (form.f1.value.length > 0 && form.f1.value != 'http://') ? form.f1.value : "http://www.dte.web.id",
		widgetTitle: form.f2.value.length > 0 ? '<h4>' + form.f2.value + '</h4>' : "",
		numPosts: parseInt(form.f3.value, 10),
		summaryLength: parseInt(form.f4.value, 10),
		titleLength: form.f5.value != "auto" ? parseInt(form.f5.value, 10) : "auto",
		thumbnailSize: form.f6.value != "false" ? parseInt(form.f6.value, 10) : false,
		noImage: (form.f11.value.length > 0 && form.f11.value !== "image.jpg") ? form.f11.value : "",
		containerId: form.f7.value,
		newTabLink: form.f8.checked,
		moreText: form.f9.value,
		widgetStyle: parseInt(form.f10.value, 10)
	};
	var s = document.createElement('script');
	s.type = "text/javascript";
	s.id = "rp-script";
	s.src = "related-post.min.js";
	if (document.getElementById('rp-script')) {
		var old = document.getElementById('rp-script');
		old.parentNode.removeChild(old);
	}
	head.appendChild(s);
	getCode();
}
function getCode() {
	var str = '<h4>CSS:</h4><p>Copy the CSS code below and place it above the <code>]]&gt;&lt;/b:skin&gt;</code></p>';
	str += '<pre onclick="autoSelect(this);"><code>' + style + '</code></pre>';
	str += '<h4>XML &amp; JavaScript:</h4><p>Copy the XML code below and place it above <code>&lt;div class=&#39;post-footer&#39;&gt;</code> (or anywhere inside the <code>&lt;b:includable id=&#39;post&#39; var=&#39;post&#39;/&gt;</code> and <code>&lt;b:includable id=&#39;mobile-post&#39; var=&#39;post&#39;/&gt;</code>. Be careful!)</p>';
	str += '<pre onclick="autoSelect(this);"><code>';
	str += '&lt;!-- Related Post Widget Start --&gt;\n';
	str += '&lt;b:if cond=&#39;data:blog.pageType == &amp;quot;item&amp;quot;&#39;&gt;\n';
	str += '  &lt;div id=&#39;' + form.f7.value + '&#39; class=&#39;related-post&#39;/&gt;\n';
	str += '  &lt;script type=&#39;text/javascript&#39;&gt;\n';
	str += '  var labelArray = [&lt;b:if cond=&#39;data:post.labels&#39;&gt;&lt;b:loop values=&#39;data:post.labels&#39; var=&#39;label&#39;&gt;\n';
	str += '          &amp;quot;&lt;data:label.name/&gt;&amp;quot;&lt;b:if cond=&#39;data:label.isLast != &amp;quot;true&amp;quot;&#39;&gt;,&lt;/b:if&gt;\n';
	str += '      &lt;/b:loop&gt;&lt;/b:if&gt;];\n';
	str += '  var relatedPostConfig = {\n';
	str += '      homePage: &amp;quot;&lt;data:blog.homepageUrl/&gt;&amp;quot;,\n';
	str += '      widgetTitle: &amp;quot;&amp;lt;h4&amp;gt;' + form.f2.value + '&amp;lt;/h4&amp;gt;&amp;quot;,\n';
	str += '      numPosts: ' + form.f3.value + ',\n';
	str += '      summaryLength: ' + form.f4.value + ',\n';
	str += '      titleLength: ' + (form.f5.value != "auto" ? form.f5.value : '&amp;quot;auto&amp;quot;') + ',\n';
	str += '      thumbnailSize: ' + form.f6.value + ',\n';
	str += '      noImage: &amp;quot;' + ((form.f11.value.length > 0 && form.f11.value !== "image.jpg") ? form.f11.value : "") + '&amp;quot;,\n';
	str += '      containerId: &amp;quot;' + form.f7.value + '&amp;quot;,\n';
	str += '      newTabLink: ' + form.f8.checked + ',\n';
	str += '      moreText: &amp;quot;' + form.f9.value + '&amp;quot;,\n';
	str += '      widgetStyle: ' + form.f10.value + ',\n';
	str += '      callBack: function() {}\n';
	str += '  };\n';
	str += '  &lt;/script&gt;\n';
	str += '  &lt;script type=&#39;text/javascript&#39; src=&#39;http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js&#39;/&gt;\n';
	str += '&lt;/b:if&gt;\n';
	str += '&lt;!-- Related Post Widget End --&gt;';
	str += '</code></pre>';
	if (form.cmp.checked) {
		str = str.replace(/\n\s+/g, "").replace(/\n(&lt;\/b:if&gt;)/g, "$1").replace(/\: (\&|[0-9]|true|false|function)/g, ":$1").replace(/function\(\) \{/g, "function(){").replace(/(labelArray|relatedPostConfig) \= /g, "$1=");
	}
	code.innerHTML = str;
}
submitConfig();
var once = false;
submit.onclick = function() {
	if (!once) {
		this.value = 'Update Preview & Get Code!';
		once = true;
	}
	submitConfig();
	document.documentElement.scrollTop = this.offsetTop - 10;
	document.body.scrollTop = this.offsetTop - 10;
	return false;
};
</script>

</body>
</html>